<template>
  <view class="container">
    <view class="penal">
      <view class="car-get">
        <view class="car-get-l">
          <view class="city-tlt">取还车城市</view>
          <view class="choose-city" @click="onChangeCityClick">
            <text class="city-name">{{ cityName || '请选择' }}</text>
            <view class="city-choose-icon">
              <u-icon name="arrow-down-fill" color="#909399" size="16"></u-icon>
            </view>
          </view>
        </view>
        <view class="car-get-l car-get-c" @click="onChangeAddressClick">
          <view class="city-tlt">取还车地点</view>
          <view class="choose-city">
            <text :class="['city-name address-name']">{{
              address || "请选择"
            }}</text>
            <view class="city-choose-icon">
              <u-icon name="arrow-down-fill" color="#909399" size="16"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="car-time">
        <view class="car-time-top">
          <view class="time-date t-left" @click="openPickCarTime('start')">
            <view>{{ startTime | dateFilter }}</view>
            <view>{{ startTime | weekFilter }}</view>
          </view>
          <view class="time-detail">
            <view class="time-detail-day">
              <view class="time-detail-line"></view>
              <view class="time-detail-text">{{
                diffTimeStr(startTime, endTime)
              }}</view>
              <view class="time-detail-line right-line"></view>
            </view>
          </view>
          <view class="time-date t-right" @click="openPickCarTime('end')">
            <view>{{ endTime | dateFilter }}</view>
            <view>{{ endTime | weekFilter }}</view>
          </view>
        </view>
      </view>
      <view class="car-button" @click="onConfirm">确认修改</view>
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs";
import { diffTimeStr } from '@/utils/index.js';

export default {
  name: "qc-choose",
  data() {
    return {
      cityName: undefined,
      cityCode: undefined,
      startTime: undefined,
      endTime: undefined,
      address: undefined,
      longitude: undefined,
      latitude: undefined,
    };
  },
  filters: {
    dateFilter(val) {
      return dayjs(val).format("YY年MM月DD日");
    },
    weekFilter(val) {
      const dayOfWeek = dayjs(val).day();
      const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const timeWeek = weeks[dayOfWeek];
      const hourTime = dayjs(val).format("HH:mm");
      return `${timeWeek} ${hourTime}`;
    },
  },
  methods: {
    diffTimeStr,
    // 初始化数据
    initData(options) {
      this.cityCode = options.cityCode;
      this.cityName = options.cityName;
      this.startTime = options.startTime;
      this.endTime = options.endTime;
      this.address = options.address;
      this.longitude = options.longitude;
      this.latitude = options.latitude;
    },
    // 更改城市
    onChangeCityClick() {
      uni.navigateTo({
        url: "/pages/selectCity",
      });
    },
    // 更改地址
    onChangeAddressClick() {
      uni.navigateTo({
        url: "/pages/selectAddress?city=" + this.cityName + "&cityCode=" + this.cityCode,
      });
    },
    // 打开选择时间
    openPickCarTime(type) {
      this.$emit("selectTime", type);
    },
    // 父级会调用此方法更新开始结束时间
    onPickCarTimeConfirm(start, end) {
      start = dayjs(start).format("YYYY-MM-DD HH:mm:00");
      end = dayjs(end).format("YYYY-MM-DD HH:mm:00");
      this.startTime = start;
      this.endTime = end;
    },
    // 确认修改
    onConfirm() {
      if (!this.address) {
        this.$u.toast("取还车地址不能为空");
        return false;
      }
      var params = {
        cityName: this.cityName,
        cityCode: this.cityCode,
        startTime: this.startTime,
        endTime: this.endTime,
        address: this.address,
        longitude: this.longitude,
        latitude: this.latitude,
      };
      this.$emit("confirm", params);
    },
  },
  mounted() {
    // 绑定监听事件
    uni.$on("chooseCity", (city) => {
      console.log(city);
      this.cityName = city.cityName;
      this.cityCode = city.cityCode;
      this.address = "";
    });
    uni.$on("chooseAddress", ({ name, location }) => {
      const locationArr = location.split(",");
      this.address = name;
      this.longitude = locationArr[0];
      this.latitude = locationArr[1];
    });
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f9fafd;
  z-index: 9;
  border-radius: 4rpx;
}
.penal {
  z-index: 9;
  width: 100%;
  padding: 40rpx;
  border-radius: 4rpx;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 24rpx;
  color: #212329;

  .car-get {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .car-get-l {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      width: 188rpx;

      .city-tlt {
        color: #909399;
      }

      .choose-city {
        display: flex;
        justify-content: space-between;
        margin-top: 16rpx;
        width: 100%;

        .city-name {
          font-size: 32rpx;
          font-weight: 700;
        }

        .city-choose-icon {
          margin-right: 36rpx;
        }
      }
    }
    .car-get-c {
      flex: 1;
    }
  }

  .car-time {
    width: calc(100% + 48rpx);
    margin-top: 32rpx;
    padding: 32rpx 24rpx;
    height: 146rpx;
    border-radius: 4rpx;
    background-image: linear-gradient(to bottom, #f6f8f9 0%, #ffffff 100%);

    .car-time-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .time-date {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        view:nth-child(1) {
          font-size: 32rpx;
          font-weight: 700;
        }
        view:nth-child(2) {
          font-size: 24rpx;
        }
      }
      .t-left {
        text-align: left;
      }
      .t-right {
        text-align: right;
      }

      .time-detail {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 8rpx;

        .time-detail-day {
          display: flex;
          justify-content: center;
          align-items: center;
          .time-detail-text {
            margin: 0 8rpx;
            font-size: 24rpx;
            color: #303133;
          }

          .time-detail-line {
            width: 40rpx;
            height: 1px;
            background-image: linear-gradient(
              to right,
              rgba(200, 201, 204, 0) 0%,
              rgba(200, 201, 204, 1) 100%
            );
          }

          .right-line {
            background-image: linear-gradient(
              to right,
              rgba(200, 201, 204, 1) 0%,
              rgba(200, 201, 204, 0) 100%
            );
          }
        }
      }
    }
  }
  .car-button {
    width: 100%;
    height: 88rpx;
    color: #ffffff;
    font-size: 32rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 4rpx;
    background-image: linear-gradient(to bottom, #252a3b 0%, #444a61 100%);
  }
}
</style>
